<template>
  <div>
    <el-main>
      <!-- <div class="qrCode" style="width:200px;height:200px;background:red;" onclick="to()"><img src="../assets/pay.png" alt=""></div> -->
       <img class="qrcode" :src="url">
    </el-main>
    <el-footer>
      <el-button style="margin-top: 12px;" @click="next">下一步</el-button>
    </el-footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      url:''
    };
  },
  methods: {
    next() {
      this.$store.state.activeNum = 3;
      this.$router.push("/index/order/success");
    }
  },
  computed:{
    count:{
      get(){
        return this.$store.state.payCount;
      },
      set(v){
        this.$store.state.payCount=v;
      }
    } 
  },
  created(){
    console.log('this.count='+this.count)
    this.$axios.post('http://localhost:3000/alipay/createInvoice',{amount:this.count})
    .then(res=>{
       console.log(res.data)
       let qrCode = res.data.qrCode
       this.url="http://localhost:3000/alipay/createQRCode?text=" + encodeURIComponent(qrCode) + "&_=" + new Date().getTime()
    })
  }
};
</script>

<style scoped>
.el-main{
    height: 500px;
    position: relative;
}
.qrCode{
    position: absolute;
    left: 50%;
    margin-left: -100px;
}
</style>